<template>
  <div class="app-container">
    <el-alert :title="'试题总数: ' + questionIndex + '/' + questionCount" type="success" :closable="false"></el-alert>
    <el-alert :title="msg" type="danger" :closable="false" v-if="!form.id"></el-alert>
    <question :form="form" ref="question" v-if="form.id"></question>
    <el-button-group v-if="form.id" class="button-rigth">
      <el-button type="primary" icon="el-icon-circle-check" size="mini" @click="handleSubmit">提交</el-button>
      <el-button type="infor" icon="el-icon-d-arrow-right" size="mini" @click="handleNext">下一题</el-button>
    </el-button-group>
  </div>
</template>

<script>
import { listStudyQuestion, randStudyQuestion, countStudyQuestion } from "@/api/study/studyQuestion";
import { addStudyWrong} from "@/api/study/studyWrong";
import Question from "@/components/Exam/Question.vue";

export default {
  name: "OrderExam",
  props: {
    subjectId: {
      type: Number,
      required: true
    }
  },
  components: {
    Question
  },
  data() {
    return {
      // 遮罩层
      loading: true,
      // 选中数组
      questionCount: 0,
      questionIndex: 0,
      questionList: [],
      msg: '',
      analyzes: '',
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        subjectId: null,
        params: {
          mode: '1',
        }
      },
      // 表单(试题)参数
      form: {}
    };
  },
  created() {
    this.initExam();
  },
  watch: {
    subjectId: {
      deep: true,
      handler(params) {
        this.initExam()
      }
    }
  },
  methods: {
    initExam() {
      this.queryParams.subjectId = this.subjectId;
      this.questionIndex = 0;

      this.getSubject();

      //第一次进入时，清除服务器缓存
      this.getQuestions(true);
    },
    /** 查询科目信息 */
    getSubject() {
      var _this = this;
      countStudyQuestion({subjectId:this.subjectId}).then(response => {
        _this.questionCount = response.data;
      });
    },
    getQuestions(restart) {
      var _this = this;
      if(restart){
        this.queryParams.params.restart = restart;
      }
      randStudyQuestion(this.queryParams).then(response => {

        if(response.rows == null || response.rows.length == 0){
          if(this.questionIndex = 0){
            this.msg = '对不起，该科目没有试题！';
            return;
          }else{
						this.msg = '恭喜，您已经模拟通关,共'+this.questionCount+'题！';
            return;
          }
        }
        for(var i=0;i<response.rows.length;i++){
          if(response.rows[i].type == '2'){
            response.rows[i].answers = [];
          }else{
            response.rows[i].answers = null;
          }
          response.rows[i].check = null;
        }
        _this.questionList = response.rows;

        _this.nextQuestion();
      });

      if(restart){
        delete this.queryParams.params.restart;
      }
    },
    nextQuestion() {
      if(this.questionList == null || this.questionList.length == 0){
        if(this.questionIndex >= this.questionCount){
          this.form = {};
					this.msg = '恭喜，您已经模拟通关,共'+this.questionCount+'题！';
        }else{
          this.getQuestions();
        }
      }else{
        this.form = this.questionList.shift();
        console.log(this.form)
        this.questionIndex ++
      }
    },
    /** 提交按钮操作 */
    handleSubmit() {
      let question = this.$refs['question'];
      if(this.form.type == '2'){
        if(question.form.answers.length == 0){
          this.$message('答案不能为空');
          return;
        }
      }else if(question.form.answers.trim == ''){
        this.$message('答案不能为空');
        return;
      }

      question.check();

      if(this.form.check){
        this.$message('回答正确');
      }else{
        this.$message('回答错误');
        addStudyWrong({questionId:this.form.id}).then(response => {
          //todo
        });
      }
    },
    /** 下一题按钮操作 */
    handleNext() {
      if(this.form.check == null){
        this.$message('本题还没有回答');
        return false
      }
      this.nextQuestion();
    },
  }
};
</script>

<style>
  .button-rigth{
    float: right;
  }
</style>
